<template>
    <div>
        <el-tabs
    v-model="editableTabsValue"
    @tab-click="aggb"
    type="card"
    closable
    class="demo-tabs"
    @edit="handleTabsEdit"
  >
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      
    </el-tab-pane>
  </el-tabs>
    </div>
</template>

<script setup lang="ts">
import {useRoute,useRouter} from 'vue-router'
const route=useRoute()
const router=useRouter()
import { ref,watch } from 'vue'

let tabIndex = 2
const editableTabsValue = ref('1')
const editableTabs = ref([
  {
    title: 'department',
    name: '1',
 
  }
])

const aggb=(pann:{props:{label:string}})=>{
// console.log(pann);
  router.push(pann.props.label)

}

const handleTabsEdit = (
  targetName:string,
  action: 'remove' | 'add',
  
) => {
  if (action === 'add') {
    if(  editableTabs.value.findIndex(v=>v.title==targetName)==-1){
      const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: targetName,
      name: newTabName,
      
    })
    editableTabsValue.value = newTabName
    }else{
      let inde:any=editableTabs.value.find(v=>v.title==targetName)
      editableTabsValue.value = inde.name 
      
    }
  


  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            // console.log(nextTab);
            
             router.push(nextTab.title)
              // console.log(nextTab);
              
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}

watch(route,()=>{
  handleTabsEdit(route.name as string,'add')
},{immediate:true})

</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>